<html>
<head>
<title>Google Reader Checker Options</title>
<style type="text/css">
/* CSS for Google Reader Checker options.html */

body {
    font-family: arial, sans-serif;
    background: #6BACCF url("options_bg.png") repeat-x top left;
    color: #fff;
}

body a, body a:visited {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
}

body a:hover {
    border-bottom: 1px solid #fff;
}

#optionsBox {
    margin: 0 auto;
    margin-top: 50px;
    width: 500px;
    text-align: center;
}

#optionsBox img {
    vertical-align: text-bottom;
}

#optionsBox input {
    margin-top: 5px;
}

#save {
    clear: both;
    float: right;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 70%;
    font-weight: bold;
}

#icon_selection {
    margin-left: 20px;
}

table {
	border-width: 5px;
	border-style: outset;
	border-color: gray;
	border-collapse: separate;
    background-color: #fff;
    color: #000;
    font-size: 90%;
    marign-bottom: 0;
}

table td {
	border-width: 1px;
	padding: 5px;
	border-style: dashed;
	border-color: #ccc;
	background-color: white;
}

table td:hover {
	background-color: #fff8dc;
}

td.left_column {
    text-align: right;
    width: 100px;
}

form {
    margin: 0;
}
</style> 
<script type="text/javascript">
// Saves options to localStorage.
var boolIdArray = new Array( "use_ctrl","use_alt","use_shift" );

function save_options() {
    for(var i in boolIdArray) {
        var id = boolIdArray[i];
        var element = document.getElementById(id);
        var value = element.checked;
        localStorage["gr_" + id] = value;
        
        console.log("saved: " + id + " as " + value);
    }

    //localStorage["gc_domain"] = document.getElementById("gmail_domain").value;
    
	window.close();
}

// Restores input states to saved values from localStorage.
function restore_options() {
    for(var i in boolIdArray) {
        var id = boolIdArray[i];
        var value = localStorage["gr_" + id];

        if(value == "true") {
            var element = document.getElementById(id);
            element.checked = true;
        }
        
        console.log("restored: " + id + " as " + value);
    }
    
    //if(localStorage["gc_domain"] != null)
    //    document.getElementById("gmail_domain").value = localStorage["gc_domain"];
}
</script>
</head>
<body onload="restore_options()">

<div id="optionsBox">
    <h1>Preview Image Options</h1>
    <p><a href="" target="blank" title="Visit extension homepage"></a></p>
    <form>
    <table style="width: 100%">
        <tr>
            <td colspan="2"><input type="checkbox" id="use_ctrl" /> Use Ctrl button for activate</td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" id="use_alt" /> Use Alt button for activate</td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" id="use_shift" /> Use Shift button for activate</td>
        </tr>
    </table>
    </form>
    <p id="save">The extension must be reloaded for the changes to take effect!<br /><button onclick="save_options()" style="width: 70px;height: 30px">Save</button></p>
</div>
</body>
</html>